<template>

  <!-- visible-change 下拉框出现/隐藏时触发 -->
  <div class="index">
    <el-select
      size="small"
      placeholder="请选择"
      value-key="label"
      style="width: 150px"
      multiple
      filterable
      clearable
      collapse-tags
      :reserve-keyword="false"
      collapse-tags-tooltip
      v-model="data.selectedList"
      @change="changeVal"
      @visible-change="passValue"
      >
      <!-- @remove-tag="handleItemRemove" -->
      <el-option
        v-for="item in data.options"
        :key="item.label"
        :label="item.label"
        :value="item.value"
        >
        <!-- @click="handleItemClick(item)" -->
      </el-option>
    </el-select>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue'
  // 参数
  const data = reactive({
    // 选中的对象列表
    selectedList: ['ALL'],

    // options
    options: [
      { label: 'ALL', value: 'ALL' }
    ]
  })

  const props = defineProps({
    options: {
      default: []
    }
  })

  const emit = defineEmits(['get-selectedList'])

  const passValue = (params:any) => {
    if(!params){
      emit('get-selectedList', data.selectedList)
    }
  }

  data.options.push(...props.options)

  const changeVal = (params:any) => {
    const target = params.indexOf('ALL')
    if(target !== -1){
      data.selectedList = ['ALL'] as any
      if(params[params.length - 1] !== 'ALL') {
        params.shift() // 去除第一个 ALL 元素
        data.selectedList = params
      }
    }

    // console.log(data.selectedList) /* 若用户点击×而取消选择的值 会造成值并没有取消的 bug 可在值发生改变的时候传值给父组件*/
  }
</script>